
//1.引入声明式导航
import { Link } from 'react-router-dom'
import Header from '../../components/Header/Header'
//引入ant库
import { Button, Form, Input, Toast } from 'antd-mobile'

//引入请求注册接口
import { reqregister } from '../../http/api'

import React, { Component } from 'react'

export default class Register extends Component {

    constructor() {
        super()
        this.state = {
            //1.state里面初始化数据
            user: {
                phone: '',
                nickname: '',
                password: ''
            }
        }
    }

    //2.input框绑定user的内容
    //封装绑定user和input内容的函数
    changeUser(e,key){
        //框架中直接就是e,e就是输出的值
        console.log(e);
        this.setState({
          user:{
            ...this.state.user,
            [key]:e
          }
        })
      }

    //3.发送请求注册接口
    async register(){
        let res = await reqregister(this.state.user)
        if(res.data.code===200){
            Toast.show({
                content:res.data.msg
            })
            //存储信息
            //跳转到登录页面
            this.props.history.push('/login')
        }
    }


    render() {
        let {user} = this.state
        return (
            <div>
                {/* 注册页面不需要显示注册,所以不传register */}
                <Header title='注册' back='back'></Header>
                <Form layout='horizontal' className='app'>
                    <Form.Item label='用户名' name='username'>
                        {/* 绑定user中的phone */}
                        <Input placeholder='请输入用户名' clearable value={user.phone} onChange={e=>this.changeUser(e,'phone')}/>
                    </Form.Item>
                    <Form.Item label='昵称' name='nickname'>
                        <Input placeholder='请输入昵称' clearable value={user.nickname} onChange={e=>this.changeUser(e,'nickname')}/>
                    </Form.Item>

                    <Form.Item label='密码' name='password'>
                        <Input placeholder='请输入密码' clearable type='password' value={user.password} onChange={e=>this.changeUser(e,'password')}/>
                    </Form.Item>
                </Form>
                {/* 4.点击注册发送请求注册接口以及跳转到登录页面 */}
                <Button block color='primary' onClick={()=>this.register()}>
                    注册按钮
                </Button>
                <div>user:{JSON.stringify(user)}</div>

            </div>
        )
    }
}

